<template>
  <div class="detailPage pd-20 mg-10">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="handleBack()">返回</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-text">
      <ElTabPane label="告警详情" name="first">
        <p class="title">告警信息</p>
        <ElRow>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>事件名称：</span>
              <span class="text">{{ record.eventName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>事件类型：</span>
              <span class="text">{{ record.eventType }}</span>
            </div>
          </ElCol>

          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>告警来源：</span>
              <span class="text">{{ record.source }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>归属组织：</span>
              <span class="text">{{ record.organizationName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>上报人/设备：</span>
              <span class="text">{{ record.reportPersonOrDevice }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>创建时间：</span>
              <span class="text">{{ record.createTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>警情简介：</span>
              <span class="text">{{ record.giveAnAlarmIntroduce }}</span>
            </div>
          </ElCol>
          <ElCol :span="24">
            <div style="display: flex">
              <span>告警地址：</span>
              <div>
                <span class="text"
                  >{{ record.address }} {{ record.longitude }},{{
                    record.latitude
                  }}</span
                >
                <!-- :defaultAddress="defaultAddress"
                  :defaultPoint="defaultPoint" -->
                <mapPosition
                  style="width: 300px; height: 200px; margin-top: 10px"
                  :data="mapConfig"
                  @getPosition="getPosition"
                />
              </div>
            </div>
          </ElCol>
          <ElCol :span="24">
            <div style="display: flex">
              <span>问题图片：</span>
              <img src="../../../../assets/u4660.png" alt="" />
            </div>
          </ElCol>
        </ElRow>
        <p class="title">处置情况</p>
        <ElRow>
          <ElCol :span="24">
            <div class="timelineProcessBox">
              <el-steps align-center>
                <el-step
                  :icon="activity.done ? 'CircleCheck' : 'Warning'"
                  v-for="(activity, index) in activities"
                  :key="index"
                  :status="activity.done ? 'success' : 'wait'"
                >
                  <template #title>
                    <span>
                      {{ activity.time }}
                    </span>
                    <p>
                      {{ activity.content }}
                    </p>
                  </template>
                </el-step>
              </el-steps>
            </div>
          </ElCol>
          <ElCol :xs="24" style="text-align: center">
            <ElButton
              type="primary"
              style="
                height: 40px;
                font-size: 14px;
                font-weight: normal;
                line-height: 40px;
                background: #1989fa;
                border: none;
                border-radius: 4px;
              "
              @click="submitForm(ruleFormRef)"
            >
              同步案件
            </ElButton>
          </ElCol>
        </ElRow>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElRow,
  ElCol,
  ElSteps,
  ElStep,
  ElMessageBox,
} from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { router } from '#/router';
import mapPosition from './map.vue';
import { CircleCheck, Warning } from '@element-plus/icons-vue';
import { getGiveAnAlarmById } from '#/api/task/alarm';
const activeName = ref('first');
// 地图配置
const mapConfig = reactive({
  defaultAddress: '天安门',
  defaultPoint: [116.397428, 39.90923] as [number, number],
});
const record = reactive({
  id: '',
  createTime: '',
  eventType: '',
  eventName: '',
  address: '',
  organizationName: '',
  reportPersonOrDevice: '',
  source: '',
  giveAnAlarmIntroduce: '',
  longitude: '',
  latitude: '',
});
const activities = ref([
  {
    content: '任务下发',
    time: '15:00',
    done: true,
  },
  {
    content: '系统检测',
    time: '15:01',
    done: true,
  },
  {
    content: '无人机起飞',
    time: '15:03',
    done: true,
  },
  {
    content: '到达航点1',
    time: '15:05',
    done: true,
  },
  {
    content: '到达航点2',
    time: '15:06',
    done: true,
  },
  {
    content: '到达航点3',
    time: '15:09',
    done: true,
  },
  {
    content: '到达航点4',
    time: '15:15',
    done: true,
  },
  {
    content: '到达航点5',
    time: '15:15',
    done: false,
  },
  {
    content: '无人机回航',
    time: '15:15',
    done: false,
  },
  {
    content: '无人机降落',
    time: '15:18',
    done: false,
  },
]);

const getPosition = () => {};
const handleBack = () => {
  router.go(-1);
};
const submitForm = (formEl) => {
  ElMessageBox.alert('已同步至警务平台', {
    type: 'success',
    center: true,
  })
    .then(() => {
      // ElMessage({
      //   type: "success",
      //   message: "删除成功",
      // });
    })
    .catch(() => {
      // catch error
    });
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await getGiveAnAlarmById(params);
  record.id = data.id;
  record.createTime = data.createTime;
  record.eventType = data.eventType;
  record.eventName = data.eventName;
  record.address = data.address;
  record.organizationName = data.organizationName;
  record.reportPersonOrDevice = data.reportPersonOrDevice;
  record.source = data.source;
  record.giveAnAlarmIntroduce = data.giveAnAlarmIntroduce;
  record.longitude = data.longitude;
  record.latitude = data.latitude;
  // activities.value = data.activities;
  // 更新地图配置
  mapConfig.defaultAddress = data.address;
  mapConfig.defaultPoint = [data.longitude, data.latitude];
};

onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.el-col {
  margin-bottom: 20px;
}

img {
  width: 300px;
  height: 200px;
}

.timelineProcessBox {
  width: 90%;

  // :deep(.el-step__icon) {
  //   color: #5cb87a;
  // }

  :deep(.el-step__title) {
    line-height: 25px;
  }

  :deep(.el-step__line) {
    background-color: #c0c4cc;
  }

  span,
  p {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  p {
    color: #303133;
  }
}
</style>
